

import { count, log } from "console";
import React, { Component } from "react";
import type { ReactNode } from 'react'

export default class App extends Component {

    render() {

        return <>
            <div>
                <h1>父组件</h1>
                {/* 
                    1. 事件
                    2. 表单
                    3. 生命周期
                    4. axios
                 */}

                <div onClick={(e) => {
                   
                    console.log('外层被点击了');
                }} style={{ width: '300px', height: '300px', backgroundColor: '#f66' }}>
                    外层
                    <div onClick={(e) => {
                        //  e.stopPropagation()
                        console.log('中层被点击了');
                    }} style={{ width: '200px', height: '200px', backgroundColor: "green" }}>
                        中间层
                        <div onClick={(e) => {

                            // 事件流向： 先捕获再冒泡，捕获是从外到内，冒泡是从内到外

                            // 阻止事件传播，阻止冒泡
                            e.stopPropagation()

                            console.log('内层被点击了');
                        }} style={{ width: '100px', height: '100px', backgroundColor: "blue" }}>内层</div>
                    </div>
                </div>


            </div>
        </>
    }

}